/**
 * 
 * <label> 标签为 input 元素定义标注（标记
 * https://www.w3school.com.cn/tags/tag_label.asp
 * 
 * label标签支持
 * 1. html全局属性 https://www.w3school.com.cn/tags/html_ref_standardattributes.asp
 * 2. html事件属性 https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
 */

import React, { Component } from 'react'

export default class Label extends Component {

  submit = (e) => {
    console.log(e);
  }

  render() {
    return(
      <div>
        Label标签使用:
        <br />
        <label>label文本</label>
        <div>
          <input type='radio' name='sex' id='male' />
          <label htmlFor='male'>male</label>
          <br />
          <input type='radio' name='sex' id='female' />
          <label htmlFor='female'>female</label>
        </div>
        
        <br />
      <div>
        这个提交没有相应，只是点击 提交下面的足球，会反选上面的足球的选项
        <br />
        {/* <form action='url' method='get/post' /> */}
        <form id="form1">
          <input type="checkbox" id="basketball" />
          <label htmlFor="basketball">篮球</label>

          <input type="checkbox" id="football" />
          <label htmlFor="football">足球</label>

          <input type="checkbox" id="tableTennis" />
          <label htmlFor="tableTennis">乒乓球</label>
          <br />
          <input type="submit" value="提交"/>
        </form>
        <label htmlFor="football" form="form1">足球</label>
        </div>


      </div>
    )
  }
}